<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.js"></script>
</head>
<body>
  <!-- 定义显示图表的容器div -->
  <div id="main" style="width: 600px;height:400px; background-color: #ccc;" ></div>
  <br>
  <br>
  <div id="main2" style="width: 600px;height:400px; background-color: #ccc;"></div>

  <script>
   // 1. 初始化生成图表对象
   const chart = echarts.init(document.getElementById('main'), 'dark', {renderer: 'svg'})

   // 2. 定义配置
   const option = {
    // x轴
    xAxis: {
      data: ['食品', '数码', '服饰', '箱包']
    },
    // y轴
    yAxis: {},
    // 系列
    series: [
      {
        name: '销量',
        type: 'bar',
        data:  [100, 120, 90, 150]
      },
      {
        name: '库存',
        type: 'line',
        data:  [50, 70, 190, 100]
      }
    ],

    // 标题
    title: {
      text: '商品销量与库存',
      textStyle: {
        fontSize: 30,
      },
      left: 'center'  // 水平居中
    },
    // 提示
    tooltip: {
      trigger: 'axis' // 自动选中最近的item显示
    },
    // 图例
    legend: {
      left: 0  // 水平靠左显示
    },
    // 位置 
    grid: {
      left: 20,
      top: 20,
      right: 20,
      bottom: 20,
      containLabel: true
    },
    // 工具
    toolbox: {
      show: true,
      feature: {
        saveAsImage: {}
      }
    }
   }

   // 3. 设置配置
   chart.setOption(option)


   const chart2 = echarts.init(document.getElementById('main2'))
   chart2.setOption({
      series: [
        {
          name: '商品销量',
          type: 'pie',
          center: [200, 200],
          radius: ['40%', '50%'],
          data: [
            {name: 'AA', value: 12},
            {name: 'BB', value: 19},
            {name: 'CC', value: 5},
            {name: 'DD', value: 9},
          ]
        }
      ],
      tooltip: {

      }
   })

  </script>
</body>
</html>